import React from 'react'
import { useTranslation } from 'react-i18next';
import './home-phone.scss'
import PhoneNav from '../../Components/Nav/PhoneNav';
import PhoneFooter from '../../Components/Footer/PhoneFooter';
const appStore = require('assets/home/appStore.png')
const googlePlay = require('assets/home/googlePlay.png')
const uploadBtn = require('assets/home/contactUs-btn-phone@2x.png')
function HomePhone() {
    const { t, i18n } = useTranslation();
    const enLanguage = i18n.language === 'en' ? true : false; // 英文 另外样式

    const anchorEvent = (anchorName: string) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    return (
        <div id='homePage' className={enLanguage ? 'homePage-phone phoneEnTxtStyle' : 'homePage-phone'}>
            {/* 头部 */}
            <PhoneNav anchorEvent={anchorEvent} />
            <main>
                <hgroup>
                    <div className='banner-p1'>
                        {
                            t('bannerTitle1')
                        }
                    </div>
                    <div className='banner-p2'>
                        {
                            t('bannerTitle2')
                        }
                    </div>
                </hgroup>
                {/* 联系我们 */}
                <div className='contact-us-txt'>
                    <p>
                        {
                            t('downloadTitle')
                        }
                    </p>
                    <div className='uploadBtn btn1'>
                        <img src={uploadBtn} className='btn-bg' alt="背景" />
                        <img src={appStore} className='btn-icon' alt="AppStore" />
                        <span className='btn-txt'>
                            AppStore
                            </span>
                    </div>
                    <button className='uploadBtn btn2'>
                        <img src={uploadBtn} className='btn-bg' alt="背景" />
                        <img src={googlePlay} className='btn-icon googlePlay' alt="googlePlay" />

                        <span className='btn-txt btn-txt-google'>
                            Goole Play
                            </span>
                    </button>

                </div>

            </main>
            {/* 页脚 */}
            <PhoneFooter />
        </div>
    )
}

export default HomePhone
